<template>
  <div class="content">
    <section class="cropper-area">
      <div class="img-wrap">
        <div class="img-cropper" v-if="imgSrc">
          <vueCropper
            @mouseenter.native="enter"
            @mouseleave.native="leave"
            ref="cropper"
            :img="imgSrc"
            :outputSize="1"
            :info="true"
            :canScale="true"
            outputType="png"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :canMove="false"
            
          ></vueCropper>
        </div>
      </div>

      <div class="mt-10">
        <el-form ref="form" label-width="80px">
          <el-form-item label="证件类型">
            <el-select
              v-model="selCredentialsTypeId"
              @change="credentialsTypeChange"
            >
              <el-option
                v-for="item in credentialsTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="像素尺寸">
            <label style="color: #606266">宽：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.width"
              style="width: 150px" @change="changeWidth"
            />
            <label class="ml-10" style="color: #606266">高：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.height"
              style="width: 150px" @change="changeHeight"
            />
          </el-form-item>

          <el-form-item label="文件大小">
            <label style="color: #606266">最小：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.minBytes"
              style="width: 150px"
            />KB<label style="margin-left: 10px; color: #606266">最大：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.maxBytes"
              style="width: 150px"
            />KB
          </el-form-item>
          <el-form-item label="底色">
            <el-select v-model="selBackgroudColor">
              <el-option
                v-for="item in backgroudColors"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <input
          ref="input"
          type="file"
          name="image"
          accept="image/*"
          @change="setImage"
        />
        <el-button type="primary" @click.prevent="showFileChooser"
          >上传图片</el-button
        >
        <el-button type="primary" @click.prevent="cropImage"
          >裁剪</el-button
        >
      </div>
    </section>
  </div>
</template>

<script>
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { removebg } from "/src/api/cropper";
import { credentialsTypes } from './credentialsTypes'

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgSrc: "https://yptest002.oss-cn-shenzhen.aliyuncs.com/9.jpeg",
      data: null,
      selCredentialsTypeId: 1,
      selCredentialsType: {},
      selBackgroudColor: "红色",
      backgroudColors: ["红色", "蓝色", "白色"],
      options: {
        autoCrop: true,
        autoCropWidth: 1,
        autoCropHeight: 1,
      },
      credentialsTypes:credentialsTypes
    };
  },
  methods: {
    credentialsTypeChange() {
      for (let i = 0; i < this.credentialsTypes.length; i++) {
        if (this.credentialsTypes[i].id === this.selCredentialsTypeId) {
          this.selCredentialsType = this.credentialsTypes[i];
          if (
            this.selCredentialsType.width > 0 &&
            this.selCredentialsType.height > 0
          ) {
            this.options.autoCropWidth = this.selCredentialsType.width;
            this.options.autoCropHeight = this.selCredentialsType.height;
            this.$refs.cropper.refresh();
          }
          break;
        }
      }
    },
    changeWidth() {
      this.options.autoCropWidth = this.selCredentialsType.width;
      this.$refs.cropper.refresh();
    },
    changeHeight() {
      this.options.autoCropHeight = this.selCredentialsType.height;
      this.$refs.cropper.refresh();
    },
    cropImage() {
      this.$refs.cropper.getCropData((data) => {
        const formData = new FormData();
        formData.append("base64Data", data);
        formData.append("backgroundColor", this.selBackgroudColor);
        removebg(formData).then((res) => {
          let filePath = res.imgPath + "&minBytes=" + this.selCredentialsType.minBytes + "&maxBytes=" + this.selCredentialsType.maxBytes
          this.download(filePath, res.imgName);
        });
      });
    },
    download(href, name) {
      let eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.target = "_blank";
      eleLink.click();
      eleLink.remove();
    },
    setImage(e) {
      const file = e.target.files[0];
      if (file.type.indexOf("image/") === -1) {
        alert("Please select an image file");
        return;
      }

      if (typeof FileReader === "function") {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.imgSrc = event.target.result;
        };

        reader.readAsDataURL(file);
      }
    },
    showFileChooser() {
      this.$refs.input.click();
    },
    enter() {
      if (this.uploadImg == "") {
        return;
      }
      this.$refs.cropper.startCrop(); //开始裁剪
    },
    leave() {
      this.$refs.cropper.stopCrop(); //停止裁剪
    },
    save() {
      //确认截图
      this.$refs.cropper.getCropData((data) => {
        //获取截图的base64格式数据
        console.log(data);
        this.show = false;
      });
    },
  },
  mounted() {
    this.credentialsTypeChange();
  },
};
</script>

<style>
input[type="file"] {
  display: none;
}

.content {
  padding-top: 5px;
  box-sizing: border-box;
}

.cropper-area {
  width: 75%;
  margin: 0 auto;
}
.img-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.display-img {
  margin-left: 30px;
  width: 300px;
  height: 300px;
}
.img-cropper {
  flex: 1;
  height: 600px;
}
</style>